<template>
  <div class="mobile-container">
    <div class="app-content">
      <!-- 头部 -->
      <div class="header">
        <div class="header-top">
          <div class="back-icon" @click="handleBack">
            <Icon icon="mdi:arrow-left"/>
          </div>
          <div class="page-title">我的委托</div>
          <div class="add-icon" @click="showDemandDialog = true">
            <Icon icon="mdi:plus" />
          </div>
        </div>

        <!-- 筛选条件 -->
        <div class="filter-section">
          <div
            v-for="filter in filterConfig"
            :key="filter.key"
            class="filter-item"
            @click="toggleFilter(filter.key)"
          >
            <span class="filter-text">{{ filter.label }}</span>
            <Icon icon="mdi:chevron-down" class="filter-arrow" />
            <div v-if="activeFilter === filter.key" class="filter-dropdown">
              <div
                v-for="option in filter.options"
                :key="option.value"
                class="dropdown-item"
                @click.stop="selectFilter(filter.key, option.value)"
              >
                <span class="option-text">{{ option.label }}</span>
                <Icon
                  v-if="filters[filter.key] === option.value"
                  icon="mdi:check"
                  class="check-icon"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 委托列表 -->
      <div class="entrust-list">
        <div v-if="entrustList.length === 0" class="empty-state">
          <Icon icon="mdi:file-document-outline" class="empty-icon"/>
          <p class="empty-text">暂无委托记录</p>
        </div>

        <div v-else class="entrust-items">
          <div
            v-for="item in filteredEntrustList"
            :key="item.id"
            class="entrust-item"
            @click="handleEntrustClick(item)"
          >
            <div class="entrust-header">
              <span class="entrust-title">{{ item.title }}</span>
              <span class="entrust-status" :class="getStatusClass(item.status)">
                {{ getStatusText(item.status) }}
              </span>
            </div>
            <div class="entrust-info">
              <div class="info-item">
                <span class="info-label">种类:</span>
                <span class="info-value">{{ item.category }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">类型:</span>
                <span class="info-value">{{ item.type === 'demand' ? '需求' : '转让' }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">数量:</span>
                <span class="info-value">{{ item.quantity }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">价格:</span>
                <span class="info-value price">{{ item.price }}</span>
              </div>
            </div>
            <div class="entrust-footer">
              <span class="entrust-time">{{ item.createTime }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 需求和发布弹窗 -->
      <div v-if="showDemandDialog" class="custom-dialog-mask" @click="showDemandDialog = false">
        <div class="custom-dialog demand-dialog" @click.stop>
          <div class="dialog-header">
            <h3>需求和发布</h3>
            <span class="close-btn" @click="showDemandDialog = false">×</span>
          </div>
          <div class="dialog-body">
            <!-- 委托类型 -->
            <div class="form-section">
              <div class="form-label">委托类型</div>
              <div class="type-selector">
                <div
                  class="type-option"
                  :class="{ active: demandForm.type === 'demand' }"
                  @click="demandForm.type = 'demand'"
                >
                  需求
                </div>
                <div
                  class="type-option"
                  :class="{ active: demandForm.type === 'transfer' }"
                  @click="demandForm.type = 'transfer'"
                >
                  转赠
                </div>
              </div>
            </div>

            <!-- 种类选择 -->
            <div class="form-section">
              <div class="form-label">种类</div>
              <div class="category-selector" @click="showCategoryPicker = true">
                <span class="category-text">{{ selectedCategory || '请选择' }}</span>
                <Icon icon="mdi:chevron-right" class="category-arrow" />
              </div>
            </div>

            <!-- 委托数量 -->
            <div class="form-section">
              <div class="form-label">委托数量</div>
              <div class="input-group">
                <input
                  v-model="demandForm.quantity"
                  type="number"
                  class="form-input"
                  placeholder="请输入数量"
                  @input="calculateTotalValue"
                >
              </div>
            </div>

            <!-- 二级密码 -->
            <div class="form-section">
              <div class="form-label">二级密码</div>
              <div class="input-group">
                <input
                  v-model="demandForm.secondaryPassword"
                  :type="showPassword ? 'text' : 'password'"
                  class="form-input"
                  placeholder="请输入二级密码"
                >
                <div class="password-toggle" @click="showPassword = !showPassword">
                  <Icon :icon="showPassword ? 'mdi:eye-off' : 'mdi:eye'" class="toggle-icon"/>
                </div>
              </div>
            </div>

            <!-- 总意向值 -->
            <div class="total-section">
              <div class="total-info">
                <span class="total-label">总意向值</span>
                <span class="total-value">{{ totalValue }}</span>
              </div>
              <div class="card-pack">
                <span class="card-label">卡包</span>
                <Icon icon="mdi:wallet-outline" class="card-icon" />
              </div>
            </div>

            <!-- 发布按钮 -->
            <div class="action-section">
              <button
                class="publish-btn"
                :class="{ disabled: !canPublish }"
                :disabled="!canPublish"
                @click="handlePublish"
              >
                发布需求
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 种类选择弹窗 -->
      <div v-if="showCategoryPicker" class="custom-dialog-mask" @click="showCategoryPicker = false">
        <div class="custom-dialog category-dialog" @click.stop>
          <div class="dialog-header">
            <h3>选择种类</h3>
            <span class="close-btn" @click="showCategoryPicker = false">×</span>
          </div>
          <div class="dialog-body">
            <div
              v-for="category in categoryOptions"
              :key="category.value"
              class="category-option"
              @click="selectCategory(category)"
            >
              <span class="category-name">{{ category.label }}</span>
              <Icon
                v-if="selectedCategory === category.label"
                icon="mdi:check"
                class="check-icon"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 底部导航 -->
      <NavLayout/>
    </div>
  </div>
</template>

<script>
import NavLayout from '@/layout/components/Navbar/index.vue'
import { Icon } from '@iconify/vue2'

export default {
  name: 'EntrustPage',
  components: {
    Icon,
    NavLayout
  },
  data() {
    return {
      activeNav: 'entrust',
      filters: {
        category: '',
        type: '',
        status: ''
      },
      activeFilter: '',
      entrustList: [],
      showDemandDialog: false,
      showCategoryPicker: false,
      showPassword: false,
      demandForm: {
        type: 'demand',
        category: '',
        quantity: '',
        secondaryPassword: '',
        price: 0
      },
      totalValue: 0,
      categoryOptions: [
        { value: 'WP', label: 'WP' },
      ],
      filterConfig: [
        {
          key: 'category',
          label: '种类',
          options: [
            { value: '', label: '全部' },
            { value: 'WP', label: 'WP' }
          ]
        },
        {
          key: 'type',
          label: '类型',
          options: [
            { value: '', label: '全部' },
            { value: 'demand', label: '需求' },
            { value: 'transfer', label: '转让' }
          ]
        },
        {
          key: 'status',
          label: '状态',
          options: [
            { value: '', label: '全部' },
            { value: 'publishing', label: '发布中' },
            { value: 'processing', label: '进行中' },
            { value: 'vouched', label: '已凭证' },
            { value: 'completed', label: '完成' },
            { value: 'closed', label: '关闭' },
            { value: 'appealing', label: '申诉中' }
          ]
        }
      ]
    }
  },
  computed: {
    filteredEntrustList() {
      return this.entrustList.filter(item => {
        const categoryMatch = !this.filters.category || item.category === this.filters.category
        const typeMatch = !this.filters.type || item.type === this.filters.type
        const statusMatch = !this.filters.status || item.status === this.filters.status
        return categoryMatch && typeMatch && statusMatch
      })
    },
    selectedCategory() {
      const category = this.categoryOptions.find(item => item.value === this.demandForm.category)
      return category ? category.label : ''
    },
    canPublish() {
      return this.demandForm.category &&
        this.demandForm.quantity &&
        this.demandForm.secondaryPassword.length >= 6
    }
  },
  methods: {
    handleBack() {
      this.$router.go(-1)
    },

    toggleFilter(filterType) {
      this.activeFilter = this.activeFilter === filterType ? '' : filterType
    },

    selectFilter(filterType, value) {
      this.filters[filterType] = value
      this.activeFilter = ''
    },

    handleEntrustClick(item) {
      console.log('点击委托:', item)
    },

    getStatusClass(status) {
      const statusMap = {
        publishing: 'status-publishing',
        processing: 'status-processing',
        vouched: 'status-vouched',
        completed: 'status-completed',
        closed: 'status-closed',
        appealing: 'status-appealing'
      }
      return statusMap[status] || ''
    },

    getStatusText(status) {
      const statusTextMap = {
        publishing: '发布中',
        processing: '进行中',
        vouched: '已凭证',
        completed: '完成',
        closed: '关闭',
        appealing: '申诉中'
      }
      return statusTextMap[status] || status
    },

    selectCategory(category) {
      this.demandForm.category = category.value
      this.showCategoryPicker = false
    },

    calculateTotalValue() {
      if (!this.demandForm.quantity) {
        this.totalValue = 0
        return
      }
      this.totalValue = this.demandForm.quantity * 10
    },

    handlePublish() {
      if (!this.canPublish) return

      console.log('发布需求:', this.demandForm)

      alert('发布成功')

      this.resetDemandForm()
      this.showDemandDialog = false
    },

    resetDemandForm() {
      this.demandForm = {
        type: 'demand',
        category: '',
        quantity: '',
        secondaryPassword: '',
        price: 0
      }
      this.totalValue = 0
    }
  }
}
</script>

<style scoped>
.mobile-container {
  width: 100%;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

.app-content {
  width: 375px;
  min-height: 667px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.header {
  padding: 20px 20px 15px;
  background: white;
  border-bottom: 1px solid #f0f0f0;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.back-icon, .add-icon {
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #333;
}

.page-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.filter-section {
  display: flex;
  gap: 10px;
}

.filter-item {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  background: white;
}

.filter-text {
  font-size: 14px;
  color: #333;
  margin-right: 4px;
}

.filter-arrow {
  font-size: 16px;
  color: #666;
}

.filter-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  margin-top: 4px;
}

.dropdown-item {
  padding: 12px 16px;
  font-size: 14px;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.option-text {
  flex: 1;
}

.check-icon {
  color: #1890ff;
  font-size: 16px;
  margin-left: 8px;
}

.dropdown-item:hover {
  background: #f5f5f5;
}

.dropdown-item:last-child {
  border-bottom: none;
}

.entrust-list {
  flex: 1;
  padding: 15px 20px;
  overflow-y: auto;
}

.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 15px;
  opacity: 0.5;
}

.empty-text {
  font-size: 14px;
  margin: 0;
}

.entrust-item {
  background: white;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.entrust-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.entrust-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.entrust-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.entrust-status {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
}

.status-publishing {
  background: #e6f7ff;
  color: #1890ff;
}

.status-processing {
  background: #fff7e6;
  color: #fa8c16;
}

.status-vouched {
  background: #f6ffed;
  color: #52c41a;
}

.status-completed {
  background: #f9f0ff;
  color: #722ed1;
}

.status-closed {
  background: #f5f5f5;
  color: #8c8c8c;
}

.status-appealing {
  background: #fff2f0;
  color: #ff4d4f;
}

.entrust-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.info-label {
  color: #666;
}

.info-value {
  color: #333;
  font-weight: 500;
}

.info-value.price {
  color: #ff6b35;
  font-weight: 600;
}

.entrust-footer {
  display: flex;
  justify-content: flex-end;
}

.entrust-time {
  font-size: 12px;
  color: #999;
}

/* 需求和发布弹窗样式 */
.custom-dialog-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  border-radius: 20px;
  animation: fadeIn 0.3s ease;
}

.demand-dialog {
  width: 320px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}

.dialog-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  font-size: 20px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: all 0.3s ease;
}

.close-btn:hover {
  color: #666;
  background: #f5f5f5;
  border-radius: 50%;
}

.dialog-body {
  padding: 20px;
}

.form-section {
  margin-bottom: 20px;
}

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}

.type-selector {
  display: flex;
  gap: 12px;
}

.type-option {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  color: #666;
}

.type-option.active {
  border-color: #667eea;
  background: #667eea;
  color: white;
}

.type-option:hover:not(.active) {
  border-color: #667eea;
  color: #667eea;
}

.category-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-selector:hover {
  border-color: #667eea;
}

.category-text {
  font-size: 14px;
  color: #333;
}

.category-arrow {
  font-size: 18px;
  color: #999;
}

.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  height: 44px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  outline: none;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #667eea;
}

.password-toggle {
  position: absolute;
  right: 12px;
  color: #999;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-icon {
  font-size: 18px;
  transition: all 0.3s ease;
}

.password-toggle:hover .toggle-icon {
  color: #667eea;
}

.total-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.total-info {
  display: flex;
  flex-direction: column;
}

.total-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.total-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.card-pack {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: white;
  border-radius: 6px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
}

.card-label {
  font-size: 12px;
  color: #666;
}

.card-icon {
  font-size: 16px;
  color: #667eea;
}

.action-section {
  margin-top: 10px;
}

.publish-btn {
  width: 100%;
  height: 44px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.publish-btn:hover:not(.disabled) {
  background: #5a6fd8;
}

.publish-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
}

.category-dialog {
  width: 280px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.category-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-option:hover {
  background: #f8f9fa;
}

.category-option:last-child {
  border-bottom: none;
}

.category-name {
  font-size: 14px;
  color: #333;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 375px) {
  .mobile-container {
    padding: 0;
  }

  .app-content {
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
  }

  .demand-dialog,
  .category-dialog {
    width: 280px;
  }
}
</style>
